<div class="content-section implementation" style="overflow: auto; min-height: 500px">
  <lv-form [formGroup]="formGroup" lvLabelWidth="120px">
    <h2>Basic</h2>
    <lv-form-item>
      <lv-form-label lvRequired>Project Name</lv-form-label>
      <lv-form-control style="flex-grow: 1" lvErrorTip="project name cannot be empty">
        <input lv-input type="input" formControlName="projectname" />
      </lv-form-control>
    </lv-form-item>
    <div style="flex-direction: column; align-items: normal; margin-top: 20px">
      <lv-datatable [lvData]="projectsData" #lvTable formArrayName="projects" [lvPaginator]="page">
        <thead>
          <tr>
            <th>Name</th>
            <th style="width: 350px">Capacity</th>
            <th>Amount</th>
            <th>Operating</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of lvTable.renderData; let i = index">
            <tr [formGroupName]="pageIndex * pageSize + i" *ngIf="errorTip[pageIndex * pageSize + i]">
              <td>
                <lv-form-control #lvFormControl>
                  <input
                    lv-input
                    formControlName="name"
                    [lv-tooltip]="errorTip[pageIndex * pageSize + i].name"
                    lvTooltipIcon="lv-icon-status-failed"
                    lvTooltipTrigger="customize"
                    [(lvTooltipVisible)]="visible[pageIndex * pageSize + i].name"
                    lvTooltipPosition="right"
                    (focus)="focus(pageIndex * pageSize + i, 'name')"
                    (blur)="visible[pageIndex * pageSize + i].name = false"
                  />
                </lv-form-control>
              </td>
              <td>
                <lv-group [lvColumns]="['auto', 'auto']">
                  <lv-form-control #lvFormControl class="aui-gutter-row-xs">
                    <input
                      lv-input
                      style="width: 150px"
                      formControlName="capacity"
                      [lv-tooltip]="errorTip[pageIndex * pageSize + i].capacity"
                      lvTooltipIcon="lv-icon-status-failed"
                      lvTooltipTrigger="customize"
                      [(lvTooltipVisible)]="visible[pageIndex * pageSize + i].capacity"
                      lvTooltipPosition="right"
                      (focus)="focus(pageIndex * pageSize + i, 'capacity')"
                      (blur)="visible[pageIndex * pageSize + i].capacity = false"
                    />
                  </lv-form-control>
                  <lv-form-control>
                    <lv-select style="width: 120px" formControlName="capacityUnit" lvValueKey="label" [lvOptions]="data"></lv-select>
                  </lv-form-control>
                </lv-group>
              </td>
              <td>
                <lv-form-control #lvFormControl>
                  <input
                    lv-input
                    formControlName="quantity"
                    [lv-tooltip]="errorTip[pageIndex * pageSize + i].quantity"
                    lvTooltipIcon="lv-icon-status-failed"
                    lvTooltipTrigger="customize"
                    [(lvTooltipVisible)]="visible[pageIndex * pageSize + i].quantity"
                    lvTooltipPosition="right"
                    (focus)="focus(pageIndex * pageSize + i, 'quantity')"
                    (blur)="visible[pageIndex * pageSize + i].quantity = false"
                  />
                </lv-form-control>
              </td>
              <td class="lv-table-operation-list">
                <a (click)="deleteRow(pageIndex * pageSize + i)">Delete</a>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
      <div *ngIf="isLastPage()"
        (click)="add()"
        style="text-align: center; border: 1px solid #eee; margin-top: 10px; cursor: pointer; padding: 5px; margin-bottom: 20px"
      >
        <button lv-button lvType="link">
          <i lv-icon="lv-icon-create"></i>
          Add
        </button>
      </div>
      <lv-paginator style="margin-top: 16px" #page [lvPageSize]="pageSize" [lvPageIndex]="pageIndex" (lvPageChange)="pageChange($event)"></lv-paginator>
    </div>
    <lv-form-item>
      <lv-form-label lvRequired>Host</lv-form-label>
      <lv-form-control>
        <lv-group lvGutter="10px" style="align-items: baseline">
          <lv-form-control lvErrorTip="host cannot be empty" class="aui-gutter-row-md" style="display: flex; flex-direction: column">
            <input lv-input formControlName="host" type="input" />
          </lv-form-control>
          <lv-form-control lvErrorTip="other host cannot be empty" class="aui-gutter-row-md" style="display: flex; flex-direction: column">
            <input lv-input formControlName="host2" type="input" />
          </lv-form-control>
          <lv-form-control>
            <button lv-button>Create</button>
          </lv-form-control>
        </lv-group>
      </lv-form-control>
    </lv-form-item>

    <h2 style="margin-top: 20px">Other</h2>
    <lv-form-item>
      <lv-form-label lvRequired style="max-width: 120px">
        <span lvOverflow>Protection Information</span>
      </lv-form-label>
      <lv-form-control
        style="flex-grow: 1"
        lvErrorTip="protection information cannot be empty"
        [lvHelp]="'Protection group information up to 500 characters.'"
      >
        <input lv-input formControlName="protect" type="input" style="flex-grow: 1" />
      </lv-form-control>
    </lv-form-item>

    <h2 style="margin-top: 20px">Description</h2>
    <lv-form-item>
      <lv-form-label>
        <span lvOverflow>Description</span>
      </lv-form-label>
      <lv-form-control [lvHelp]="helpTpl">
        <textarea lv-input rows="4" formControlName="description"></textarea>
      </lv-form-control>
    </lv-form-item>
  </lv-form>

  <div style="border-top: 1px solid #ddd; padding-top: 0.2rem; margin-top: 20px">
    <h2>Type</h2>
    <p>Form Value: {{ formGroup.value | json }}</p>
    <p>Form Status: {{ formGroup.status | json }}</p>
  </div>
</div>

<ng-template #helpTpl>
  <div>
    Description refer to
    <a class="help-description" href="#" lv-link lvType="primary ">there</a>
    .
  </div>
</ng-template>
